<template>
	<view class="content">
		<view class="header">
			<image class="logo" :src="imgUrl+'/static/image/home/logo.png'" mode="widthFix"></image>
			<view class="map_search" >
				<view class="place" v-if="adress">
					<u-icon name="map" color="#FFFFFF" size="40rpx"></u-icon>
					<text>{{adress}}</text>
				</view>
				<!-- <u-icon name="search" color="#FFFFFF" size="50rpx"></u-icon> -->
			</view>
			<view class="banner">
				<swiper class="screen-swiper" indicator-dots="true" circular="true" autoplay="true" interval="5000"
					duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="imgUrl + item.url"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="content_sy">
			<view class="module_box">
				<view class="module1" @click="openLoginInfo">
					<view>
						<image :src="imgUrl+'/static/image/home/dongtai.png'" mode=""></image>
						<text>关于《楚辞》四方连邮票折相关后续内容</text>
					</view>
					<view>
						<u-icon name="arrow-right" color="#B9BDBC" size="30rpx"></u-icon>
					</view>
				</view>
				<view class="module2">
					<view class="mail_module" v-for="(item,index) in mailModuleList" :key="index" @click="unmannedStation(item.urlPath)">
						<image :src="imgUrl + item.url"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="module3">
					<view class="module_item" v-for="(item,index) in moduleList" :key="index">
						<image :src="imgUrl + item.url"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="scene_box">
				<!-- <view class="title">定制化服务</view> -->
<!--				<image  src="/static/image/home/xy.png" mode="widthFix"-->
<!--					@click="jinbao('/subPackages/packF/pages/index/index')"></image>-->
				<image v-if="sceneObj.sceneName=='校园'" :src="imgUrl+'/static/image/home/xy.png'" mode="widthFix"
					@click="jinbao('/subPackages/packF/pages/index/index')"></image>
				<image v-if="sceneObj.sceneName=='写字楼'" :src="imgUrl+'/static/image/home/xzl.png'" mode="widthFix"
					@click="jinbao('/subPackages/packA/pages/index/index')"></image>
				<image v-if="sceneObj.sceneName=='景点'" :src="imgUrl+'/static/image/home/jd.png'" mode="widthFix"
					@click="jinbao('/subPackages/packD/pages/index/index')"></image>
				<image v-if="sceneObj.sceneName=='医院'" :src="imgUrl+'/static/image/home/yy.png'" mode="widthFix"
					@click="jinbao('/subPackages/packB/pages/index/index')"></image>
				<image v-if="sceneObj.sceneName=='商厦'" :src="imgUrl+'/static/image/home/ss.png'" mode="widthFix"
					@click="jinbao('/subPackages/packC/pages/index/index')"></image>
				<image v-if="sceneObj.sceneName=='火车站'" :src="imgUrl+'/static/image/home/hcz.png'" mode="widthFix"
					@click="jinbao('/subPackages/packE/pages/index/index')"></image>
			</view>
		</view>

		<!-- <view @click="jinbao('/subPackages/packG/pages/index/index')">g包</view> -->
		<!--
			@open="openLoginInfo"
		 -->
		<!-- <u-popup :show="showLoginInfo" v-if="showLoginInfo" :closeOnClickOverlay="false" mode="bottom" round="15" @close="closeLoginInfo">
			<view class="sqnr">
				<view class="content">
					本小程序为你提供账号服务，请仔细阅读，
					<text>《小程序用户隐私协议》</text>，
					<text>《小程序用户服务开通协议》</text>，
					如果你同意此协议，请点击同意。
				</view>
				<view class="operate">
					<view>
						<button style="padding: 0 80rpx;" size="mini" @click="closeLoginInfo">取消</button>
					</view>
					<view>
						<button style="padding: 0 80rpx;" size="mini" type="primary" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">
							同意
						</button>
					</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="showUserTxNc" :closeOnClickOverlay="false" mode="bottom" round="15" @close="closeUserTxNc">
			<view class="sqnr">
				<view class="content">
					本小程序为你提供信息支持需要获取您的头像，如果你同意，请点击同意。
				</view>
				<view class="operate">
					<view>
						<button style="padding: 0 80rpx;" size="mini" @click="closeUserTxNc">取消</button>
					</view>
					<view>
						<!--
							open-type="chooseAvatar"
							@getuserinfo="queryUserTxNc"
						 -->
						<button style="padding: 0 80rpx;" size="mini" type="primary" open-type="chooseAvatar"
							@getuserinfo="queryUserTxNc">
							同意
						</button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-modal :show="showLoginInfo"  title="为什么不生效" >
			<view class="slot-content">
				测试
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	import {
		setData,
		getData,
		removeData
	} from "@/utils/auth.js";
	import {
		login,
		getSjh,
		getInfo,
		getMapDistance
	} from "@/api/home.js"
	// const QQMapWX = require("@/utils/qqmap-wx-jssdk.js");
	// const qqmapsdk = new QQMapWX({
	// 	key: "MMGBZ-CUNOI-MBQGE-UZGGO-MRKFV-3HBND"
	// });
	export default {
		data() {
			return {
				showLoginInfo: false,
				showUserTxNc: false,
				title: '',
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/image/home/banner1.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/image/home/banner2.png'
					},
					{
						id: 2,
						type: 'image',
						url: '/static/image/home/banner3.png'
					}
				],
				mailModuleList: [{
						name: "寄件服务",
						url: '/static/image/home/1yjfw.png'
					},
					{
						name: "无人驿站",
						url: '/static/image/home/2yjfw.png',
						urlPath:'/subPackages/unmannedStation/pages/index/index'
					},
					{
						name: "包裹查询",
						url: '/static/image/home/3yjfw.png'
					},
					{
						name: "附近网点",
						url: '/static/image/home/4yjfw.png'
					}
				],
				moduleList: [{
						name: "理财超市",
						url: '/static/image/home/1module.png'
					},
					{
						name: "信用卡服务",
						url: '/static/image/home/2module.png'
					},
					{
						name: "贷款申请",
						url: '/static/image/home/3module.png'
					},
					{
						name: "养老金专区",
						url: '/static/image/home/4module.png'
					},
					{
						name: "集邮商城",
						url: '/static/image/home/5module.png'
					},
					{
						name: "报刊商城",
						url: '/static/image/home/6module.png'
					},
					{
						name: "文创产品",
						url: '/static/image/home/7module.png'
					},
					{
						name: "明信片商城",
						url: '/static/image/home/8module.png'
					}
				],
				address: "",
				dw: {
					longitude: "",
					latitude: ""
				},
				adress:"",
				sceneObj:{},
				code:""
			}
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		onLoad() {
			// setData('userInfo',{
			// 	admin: false,
			// 	avatar: "https:/mbiz.gpic.cn/mbiz/icTdbgWNOWNRna42F242Lcia07j00dd2FlGIYOfGLAJGFxM4FbngF6yfMxBgJ0F3YRGIC1aPAK2doagdusBz",
			// 	createBy: null,
			// 	createTime: "2025-09-16 00:59:07",
			// 	delFlag: "0",
			// 	nickName: "menghuan",
			// 	password :"$2a$10$8cEwk8Lf / mcpFoe9ULa4uML7kRvhR .3 bHRdzlmUONX5 / rz4aWxpG",
			// 	phonenumber :"17836211058",
			// 	userId:"11",
			// 	userName :"54e0897b-a58b-4694-8375-6d222ba1fff2",
			// 	xcxopenld:"o0fuF61V1JgKX12PS5URsrwkJB5U",
			// })
		},
		async mounted() {


			// #ifdef  MP-WEIXIN
			if (!getData("access_token")) {
				await this.queryLoginInfo()
			}else{
				await this.getLocation()
			}

			// #endif

		},
		methods: {
			async getLocation() {
				const auth = await uni.getSetting();
				console.log(auth, '456');
				if (!auth.authSetting['scope.userLocation']) {
					const res = await uni.authorize({
						scope: 'scope.userLocation'
					});
					console.log('授权成功');
				}
				let _this = this
				// console.log(this.$store.state.storeA.name1);
				// console.log(this.$store.getters.name1);
				await uni.getLocation({
					type: 'gcj02', // 默认为 wgs84 返回 GPS 坐标，可选'gcj02'返回国测局坐标（微信小程序常用）
					success: function(res) {
						console.log('获取位置成功：', res);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						console.log('速度：' + res.speed);
						console.log('精度：' + res.accuracy + '米');
						getMapDistance({
							currentLongitude:res.longitude,
							currentLatitude:res.longitude
						}).then(res2=>{
							console.log(res2,'当前所在的场景');
							_this.sceneObj = res2.data[0]
						})
						// _this.dw=res
						// _this.$tmap.reverseGeocoder({
						// 	location: {
						// 		latitude: res.latitude,
						// 		longitude: res.longitude
						// 	},
						// 	success: (resp) => {
						// 		console.log('详细地址：', resp.result.formatted_addresses
						// 		.recommend);
						// 		_this.adress=resp.result.formatted_addresses.recommend
						// 		uni.showToast({
						// 			title: '获取地址成功',
						// 			icon: 'success'
						// 		});
						// 	},
						// 	fail: (err) => {
						// 		console.error('地址解析失败：', err);
						// 		uni.showToast({
						// 			title: '解析失败',
						// 			icon: 'none'
						// 		});
						// 	}
						// });
					},
					fail: function(err) {
						console.error('获取位置失败：', err);
						// 常见错误：用户拒绝授权、定位失败、系统未开启定位等
						uni.showToast({
							title: '定位失败',
							icon: 'none'
						});
					},
					complete: function() {
						console.log('定位请求完成');
					}
				});
			},
			
			// 小邮局-无人驿站模块
			unmannedStation(e){
				uni.navigateTo({
					url: e
				});
			},

			// 获取用户 access_token
			queryLoginInfo() {
				const _this = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(response) {
						console.log(response);
						console.log(response.authResult);
						setData("user_code", response.code);
						_this.code = response.code
						_this.openLoginInfo() //打开授权手机号弹框
						_this.loginInfo(response.code); //获取用户 access_token
					}
				});
			},
			async loginInfo(code) {
				let response = await login({
					wxCode: code,
					loginType: "wx_xcx"
				})
				console.log(response);
				setData("access_token", response.data.access_token)

			},
			// 关闭用户取消授权
			closeLoginInfo() {
				uni.showToast({
					title: '授权失败',
					icon: 'none'
				});
				this.showLoginInfo = false
			},
			// 打开用户确定授权
			openLoginInfo() {
				this.showLoginInfo = true
			},
			// 获取用户手机号
			getPhoneNumber(e) {
				this.showLoginInfo = false;
				console.log(e);
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					// 用户拒绝授权
					uni.showToast({
						title: '授权失败',
						icon: 'none'
					});
					return false;
				}

				getSjh(e.detail.code).then(response => {
					console.log(response);
					this.showLoginInfo = false;
					 getInfo().then(res=>{
						console.log(res,'个人');
						setData("userInfo",JSON.stringify( res.user))
						this.getLocation();
					})
					// this.loginInfo(this.code); //获取用户 access_token
					// this.showUserTxNc = true; //调用用户头像
					// this.queryUserTxNc();
				})
			},
			// 关闭获取用户头像昵称弹框
			closeUserTxNc() {
				this.showUserTxNc = false;
			},
			//获取用户头像和昵称需要在 uni.login 后
			queryUserTxNc(response) {
				console.log("用户信息", response);
				// const { userInfo, avatarUrl } = response.detail.userInfo;
				// console.log('新头像:', avatarUrl);
				// console.log('新昵称:', userInfo);

				// wx.getUserProfile({ //使用这个，得到小程序后台账号设置，服务内容声明中，用户隐私保护指引，添加信息类型，勾选用户信息(微信昵称、头像)，说明用途，提交协议
				// 	desc: '用户信息用于个人信息展示',
				// 	success: function (response) {
				// 		console.log('用户信息：', response);
				// 		// console.log('用户昵称为：' + infoRes.userInfo.nickName);
				// 	}
				// });
			},
			jinbao(value) {
				uni.navigateTo({
					url: value
				});
			},
			// getLocation() {
			// 	console.log(qqmapsdk);
			// 	const _this = this;
			// 	qqmapsdk.reverseGeocoder({
			// 		location: "37.78801,112.57396",
			// 		success: function(response) {
			// 			console.log(response);
			// 			console.log(response.result);
			// 		},
			// 		fail: function(error) {
			// 			console.error(error);
			// 		},
			// 		complete: function(res) {
			// 			console.log(res);
			// 		}
			// 	})
			// 	// debugger
			// 	// uni.getSetting({
			// 	//    success(res) {
			// 	//       console.log(res)
			// 	//    }
			// 	// })
			// 	// uni.getLocation({
			// 	// 	type: 'wgs84',
			// 	// 	success: function (res) {
			// 	// 		debugger
			// 	// 		console.log('当前位置的经度：' + res.longitude);
			// 	// 		console.log('当前位置的纬度：' + res.latitude);
			// 	// 	}
			// 	// });
			// },
			// getLocation2() {
			// 	let that = this
			// 	// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
			// 	uni.getSetting({
			// 		success(res) {
			// 			// 如果没有授权
			// 			if (!res.authSetting['scope.userLocation']) {
			// 				// 则拉起授权窗口
			// 				uni.authorize({
			// 					scope: 'scope.userLocation',
			// 					success() {
			// 						//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
			// 						uni.getLocation({
			// 							type: 'wgs84',
			// 							success: function(res) {
			// 								that.x = res.longitude
			// 								that.y = res.latitude
			// 								console.log(res)
			// 								console.log('当前位置的经度：' + res.longitude)
			// 								console.log('当前位置的纬度：' + res.latitude)
			// 								// uni.showToast({
			// 								// 	title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
			// 								// 	icon: 'success',
			// 								// 	mask: true
			// 								// })
			// 							},
			// 							fail(error) {
			// 								console.log('失败', error)
			// 							}
			// 						})
			// 					},
			// 					fail(error) {
			// 						//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
			// 						console.log('拒绝授权', error)

			// 						uni.showModal({
			// 							title: '提示',
			// 							content: '若点击不授权，将无法使用位置功能',
			// 							cancelText: '不授权',
			// 							cancelColor: '#999',
			// 							confirmText: '授权',
			// 							confirmColor: '#f94218',
			// 							success(res) {
			// 								console.log(res)
			// 								if (res.confirm) {
			// 									// 选择弹框内授权
			// 									uni.openSetting({
			// 										success(res) {
			// 											console.log(res.authSetting)
			// 										}
			// 									})
			// 								} else if (res.cancel) {
			// 									// 选择弹框内 不授权
			// 									console.log('用户点击不授权')
			// 								}
			// 							}
			// 						})
			// 					}
			// 				})
			// 			} else {
			// 				// 有权限则直接获取
			// 				uni.getLocation({
			// 					type: 'wgs84',
			// 					success: function(res) {
			// 						that.x = res.longitude
			// 						that.y = res.latitude
			// 						console.log(res)
			// 						console.log('当前位置的经度：' + res.longitude)
			// 						console.log('当前位置的纬度：' + res.latitude)
			// 						uni.showToast({
			// 							title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
			// 							icon: 'success',
			// 							mask: true
			// 						})
			// 					},
			// 					fail(error) {
			// 						uni.showToast({
			// 							title: '请勿频繁调用！',
			// 							icon: 'none',
			// 						})
			// 						console.log('失败', error)
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: yellow;
	}

	.header {
		padding: 0 32rpx;
		position: relative;
		// background: linear-gradient(360deg, rgba(0, 143, 138, 0) 0%, rgba(0, 143, 138, 0.65) 55%, #00ACAA 100%); 2024-9-14修改成以下样式
		background: linear-gradient( 360deg, rgba(0,143,103,0) 0%, rgba(37,165,125,0.8) 48%, #25A57D 100%);

		>.logo {
			position: absolute;
			right: 0;
			width: 400rpx;
		}

		>.map_search {
			padding: 15rpx 0;
			display: flex;
			justify-content: space-between;

			>.place {
				display: flex;
				align-items: center;
				color: #FFFFFF;

				>text {
					padding-left: 15rpx;
				}
			}
		}

		>.banner {
			overflow: hidden;
			border-radius: 15rpx;

			.screen-swiper {
				height: 400rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.content_sy {
		padding: 0 32rpx;

		>.module_box {
			>view {
				background-color: #FFFFFF;
				border-radius: 15rpx;
				margin-top: 30rpx;
			}

			>.module1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25rpx;

				>view:nth-child(1) {
					display: flex;
					align-items: center;

					>text {
						width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					>image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}

			>.module2 {
				padding: 25rpx 40rpx;
				display: flex;
				justify-content: space-between;

				>.mail_module {
					text-align: center;

					>image {
						width: 110rpx;
						height: 110rpx;
						margin-bottom: 15rpx;
					}
				}
			}

			>.module3 {
				// padding: 25rpx 40rpx;
				padding-top: 25rpx;
				display: flex;
				flex-wrap: wrap;

				>.module_item {
					width: 25%;
					text-align: center;
					margin-bottom: 25rpx;

					>image {
						width: 90rpx;
						height: 90rpx;
						margin-bottom: 15rpx;
					}
				}
			}
		}

		>.scene_box {
			>.title {
				color: #016548;
				font-size: 33rpx;
				/* normal默认 bold粗体 bolder比粗体更加粗 lighter比正常字体细 */
				font-weight: bolder;
				padding: 30rpx 0;
				position: relative;

				&::after {
					position: absolute;
					z-index: -1;
					left: 0;
					bottom: 30rpx;
					content: '';
					width: 170rpx;
					height: 10rpx;
					background: linear-gradient(90deg, rgba(216, 216, 216, 0) 14%, #28B389 100%);
				}
			}

			>image {
				width: 100%;
				margin-bottom: 20rpx;
			}
		}
	}

	.sqnr {
		padding: 50rpx 0 50rpx;

		>.content {
			/* 字体大小 */
			font-size: 25rpx;
			/* 字体 */
			font-family: "微软雅黑", "Microsoft YaHei";
			/* normal默认 bold粗体 bolder比粗体更加粗 lighter比正常字体细 */
			font-weight: normal;
			/* 文本开头缩进 */
			text-indent: 2em;
			line-height: 50rpx;
			margin-bottom: 50rpx;
			padding: 0 30rpx;

			>text {
				color: #007AFF;
			}
		}

		>.operate {
			display: flex;
			justify-content: center;

			>view:nth-child(1) {
				margin-right: 20rpx;
			}
		}
	}
</style>
